import React, { Component } from 'react';
import '../styles/Kechengxx.scss'
import { NavBar, Space,Rate,Tabs,Footer,Dropdown} from 'antd-mobile'
import { SearchOutline, MoreOutline,StarOutline} from 'antd-mobile-icons'

class Kechengxx extends Component {
    constructor(props) {
        super(props)
        this.state = {
          right: (
            <div style={{ fontSize: 24 }}>
              <Space style={{ '--gap': '16px' }}>
                <SearchOutline />
                <MoreOutline />
              </Space>
            </div>
          ),
        }
      }
    render() {
        return (
            <div className='kechengxx'>
                 <NavBar  right={this.state.right} onBack={()=>{this.props.history.go(-1)}}>
                 课程详情
                </NavBar>
                <div className="nei">
                    <div className="h1">
                        <div className="d1">幼儿英语入门</div>
                        <div className="d2">外教一对一辅导</div>
                      <img src="https://img.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u118.png" alt="" />
                      <div className='d3'><StarOutline fontSize={36} color='darkorange'/></div>
                      <div className="d4"></div>
                    </div>
                    <div className="h2">幼儿英语入门课程</div>
                    <div className="h3">
                        <div className='z1'><Rate allowHalf readOnly defaultValue={4.5}  style={{'--star-size': '16px'}}/>4.9</div>
                        <div className="z2">
                         <span>¥</span>2999.00
                        </div>
                    </div>
                    <div className="h4">296人在学</div>
                    <Tabs>
                      <Tabs.Tab title='课程简介' key='fruits'>
                        <div className="ne">
                            <div className="b1">教学目标</div>
                            <div className="b2"></div>
                            <div className="b3">
                            建立对英语文字的认知，学习地道交际语言，养成英语表达和交流习惯。
                            </div>
                            <div className="b4">
                                <img src="https://img.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/u2869.png" alt="" />
                            </div>
                            <div className="b1">级别描述</div>
                            <div className="b2"></div>
                            <div className="b3">
                            1、掌握408个词汇,,247个句型,8种发音规律，9个故事，9个价值观，5种语法，4种学科知识；
                            </div>
                            <div className="b3">
                            2、学习技能：用学科知识引导学生的语言学习，使外语水平与学科知识相互促进；通过故事复习，巩固已学知识点，并引导孩子学习故事中的价值观。掌握语音知识学习拼读技能，融入场景练习，做到活学活用。
                            </div>
                            <div className="b4">
                                <img src="https://img.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/u2870.png" alt="" />
                            </div>
                            <div className="b3">
                            我们为您配备专业的学习顾问，为宝贝规划对应的英语学习路径和辅导提升计划，保证优质服务质量。
                            </div>
                            <Footer label='我是有底线的'></Footer>
                        </div>
                      </Tabs.Tab>
                      <Tabs.Tab title='课程设置' key='vegetables'>
                         <Dropdown>
                         <Dropdown.Item key='sorter' title='A good begining (A-H)'>
                             <div style={{ padding: 12 }}>
                               排序内容
                               <br />
                               排序内容
                               <br />
                               排序内容
                               <br />
                               排序内容
                               <br />
                             </div>
                           </Dropdown.Item>
                         </Dropdown>
                         <Dropdown>
                         <Dropdown.Item key='sorter' title='A good begining (A-H)'>
                             <div style={{ padding: 12 }}>
                               排序内容
                               <br />
                               排序内容
                               <br />
                               排序内容
                               <br />
                               排序内容
                               <br />
                             </div>
                           </Dropdown.Item>
                         </Dropdown>
                         <Dropdown>
                         <Dropdown.Item key='sorter' title='A good begining (l-L)'>
                             <div style={{ padding: 12 }}>
                               排序内容
                               <br />
                               排序内容
                               <br />
                               排序内容
                               <br />
                               排序内容
                               <br />
                             </div>
                           </Dropdown.Item>
                         </Dropdown>
                         <Dropdown>
                         <Dropdown.Item key='sorter' title='A good begining (M-Z)'>
                             <div style={{ padding: 12 }}>
                               排序内容
                               <br />
                               排序内容
                               <br />
                               排序内容
                               <br />
                               排序内容
                               <br />
                             </div>
                           </Dropdown.Item>
                         </Dropdown>
                         <Dropdown>
                         <Dropdown.Item key='sorter' title='A good begining (M-Z)'>
                             <div style={{ padding: 12 }}>
                               排序内容
                               <br />
                               排序内容
                               <br />
                               排序内容
                               <br />
                               排序内容
                               <br />
                             </div>
                           </Dropdown.Item>
                         </Dropdown>
                      </Tabs.Tab>
                      <Tabs.Tab title='师资介绍' key='animals'>
                      <div className="ne">
                            <div className="b1">JASON</div>
                            <div className="b2"></div>
                            <div className="b3">
                            来自英国的明星老师，毕业于威特沃特斯兰德大。他帅气儒雅，却又热情搞怪，课堂上的他仿佛一名话剧演员。有趣的表情，诙谐的动作，每一样都吸引着孩子们的眼球。他经验丰富，3年以来一直从事教育行业，懂得如何激发孩子的兴趣，更能帮助孩子们发展想象力，不断地探索语言的奥秘。
                            </div>
                            <div className="b4">
                                <img src="https://img.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/u2907.png" alt="" />
                            </div>
                            <div className="b1">BONNIE</div>
                            <div className="b2"></div>
                            <div className="b3">
                            来自加拿大的美女外教。她毕业于乔治布朗大学的早期儿童教育专业，自2006毕业起就在当地幼儿园担任幼儿教师，教学经验和儿童教育经验都十分丰富。长期的幼儿教育也让她更加懂得关注孩子的心理感受，她会恰当的鼓励和帮助孩子建立自信，养成开口说英语的习惯。
                            </div>
                            <div className="b4">
                                <img src="https://img.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/u2910.png" alt="" />
                            </div>
                            <div className="b3">
                            我们为您配备专业的学习顾问，为宝贝规划对应的英语学习路径和辅导提升计划，保证优质服务质量。
                            </div>
                            <Footer label='我是有底线的'></Footer>
                        </div>
                      </Tabs.Tab>
                    </Tabs>
                </div>
                <div className="di">
                    <div className="d1">¥2999</div>
                    <div className="d2">立即购买</div>

                </div>
            </div>
        );
    }
}

export default Kechengxx;